<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 100px)">
    <!-- 导航条以及外壳 -->
    <div ref="orderview" style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <a-breadcrumb-item href="" @click.native="$router.push('/service')">
          康复服务
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #ffbe37"> 机构列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="mespan">
      <p>2021年全国残疾儿童康复救助定点服务机构信息</p>
      <span> (数据来源：中国残疾人联合会)</span>
    </div>
    <div class="top">
      <a-input
        v-model="msgons"
        placeholder="请输入关键字"
        class="searchInput"
      />

      <div class="searchIcon" @click="searchSel()">
        <img src="@/assets/image/icon1.png" alt="" />
        <span>搜索</span>
      </div>
    </div>
    <div class="conder">
      <div class="cOsingleCF">
        <div>
          <span class="x5TXt">地区：</span>
        </div>
        <div style="padding-left: 24px" class="cityfilter">
          <p
            @click="selColor(null,null)"
            class="cityall"
            :class="{ sconColor: selnumber == null }"
          >
            全部
          </p>
          <ul class="pIul2 filtListtype" id="pIul2">
            <li
              :class="{ sconColor: selnumber == index }"
              @click="selColor(index,item)"
              v-for="(item, index) in provinceList"
              :key="index"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <span class="pIspan3" v-show="flag == 1" @click="navbar(1)"
          >展开&nbsp;<a-icon type="caret-down"
        /></span>
        <span class="pIspan3" v-show="flag == 2" @click="navbar(2)"
          >收起&nbsp;<a-icon type="caret-left"
        /></span>
      </div>
      <!-- 展示区域 -->
      <div class="coRsingleCF">
        <div class="listDiv" v-for="(item, list) in trainList" :key="list">
          <!-- @click="getJumptrainDetails(item.trainNo)" -->
          <span class="titleTxt1 lineSingle" :title="item.name">
            {{ item.name }}
          </span>
          <div class="dlex2-div">
            <img src="@/assets/image/icon_contact.png" alt="" />
            <span :title="item.phone"> {{ item.phone }}</span>
          </div>
          <div class="dlex2-div">
            <img src="@/assets/image/icon_position.png" alt="" />
            <span :title="item.address"> {{ item.address }}</span>
          </div>
          <div class="dlex3-div">
            <img src="@/assets/image/icon_love.png" alt="" />
            <span :title="item.type">{{ item.type }}</span>
          </div>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin: 68px"
        v-if="trainList.length < 1 && ioosFlag"
      />
    </div>
    <div class="cnBottom" v-show="totalCount > 10">
      <div>
        <a-pagination
          class="fend_iv"
          v-model="pageIndex"
          @change="inputsel"
          :total="totalCount"
          show-less-items
        />

        <!-- <a-button v-if="btnState == 1" @click="more()" class="sobtn"
          >点击加载更多</a-button
        >
        <a-button v-show="btnState == 2" class="sobtn" :loading="true"
          >正在加载中</a-button
        >
        <span class="timeTxt1" v-if="btnState == 3">没有更多了</span> -->
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      msgons: "",
      selnumber: null,
      flag: 1,
      btnState: 1,
      provinceList: [],
      // 当前选中的市
      provinceSelname: "",
      // 页码
      pageIndex: 1,
      // 总条数
      totalCount: 1,
      // 培训列表
      trainList: [],
      onLoading: false,
      ioosFlag: false,
    };
  },
  methods: {
    // 分页的回调
    inputsel(e) {
      // console.log(e, this.pageIndex);
      
      this.professional();
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    // timer用于储存定时器,防抖调用接口
    searchSel() {
      this.pageIndex = 1;
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }
      // 设置定时器和事件
      this.timer = setTimeout(() => {
        this.trainList = [];
        this.professional();
      }, 500);
    },

    // 跳转培训详情页
    getJumptrainDetails(e) {
      // 查询详情的接口是公用的，所以传id里面显示内容不一样传type，2都是企业培训，3都是职业培训
      this.$router.push("/education/trainDetails?id=" + e + "&type=" + 3);
    },
    // 选中样式函数
    selColor(e,r) {
      this.pageIndex = 1;
      (this.msgons = ""), (this.trainList = []);
      this.selnumber = e;
      if (e != null) {
        this.provinceSelname = r;
      } else {
        this.provinceSelname = null;
      }
      this.professional();
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.professional();
    },
    // 查询地址省市
    provincesel() {
      this.onLoading = true;
      this.$ajax({
        url: "/entrepreneurial/cominfo/recoveryInstitutionProvince",
        method: "get",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.provinceList = res.data;
          // console.log(this.provinceList);
        } else {
          this.onLoading = false;
          this.provinceList = [];
          return false;
        }
      });
    },
    // 机构 - 列表
    professional() {
      this.ioosFlag = false;
      let ber = [];
      this.$ajax({
        url:
          "/entrepreneurial/cominfo/institution/list?pageSize=" +
          10 +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        params: {
          keyword: this.msgons, //关键字
          //分页开区间开大闭小 : 9,
          //分页闭区间 : this.pageIndex,
          province: this.provinceSelname, //位置
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.totalCount = res.data.totalCount;
          this.trainList = res.data.list;
          // for (var i in ber) {
          //   this.trainList.push(ber[i]);
          // }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
          this.ioosFlag = true;
        } else {
          this.onLoading = false;
          this.ioosFlag = false;
          this.trainList = [];
          this.btnState = 3;
        }
      });
    },
    // 显示隐藏器
    navbar(e) {
      let navbar = document.getElementById("pIul2");
      if (e == 1) {
        this.flag = 2;
        navbar.style.cssText = "height:auto;";
      } else {
        this.flag = 1;
        navbar.style.cssText = "height:30px;";
      }
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrolltop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
  },
  created() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.professional();
    this.provincesel();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
//  自己写
//input框内文字修改
::-webkit-input-placeholder {
  font-size: 15px;
  font-family: PingFangSC-Regular;
  color: #999999 !important;
}
.top {
  width: 450px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.cityfilter{
  display: flex;
  .cityall{
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
  }
  .filtListtype{
    width: 1000px;
  }
}
// 中间部分样式
.conder {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  .listDiv {
    width: 589px;
    height: 190px;
    background: #ffffff;
    padding: 20px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    // cursor: pointer;
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
.mespan {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 14px;
  font-size: 24px;
  p {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    text-align: center;
  }
  span {
    display: block;
    text-align: center;
    font-size: 16px;
  }
}
.dlex3-div {
  margin-top: 8px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 16px;
  }
  span {
    font-size: 15px;
    font-family: PingFang SC;
    color: #999999;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
  }
}
.dlex2-div {
  margin-top: 8px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 16px;
  }
  span {
    font-size: 15px;
    font-family: PingFang SC;
    color: #999999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.cnBottom {
  width: 100%;
  margin-top: 60px;
  padding-bottom: 70px;
}
.timeTxt1 {
  text-align: center;
}
.coRsingleCF {
  margin-top: 26px;
}
.lineSingle {
  font-weight: 600;
  display: block;
  margin-bottom: 18px;
}
.fend_iv {
  text-align: center;
}
</style>
